﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body class="easyui-layout">
    <link href="../hcjsui/jquery-easyui-1.3.3/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../hcjsui/jquery-easyui-1.3.3/themes/icon.css" rel="stylesheet" type="text/css" />

    <script src="../hcjsui/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="../hcjsui/jquery-easyui-1.3.3/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../hcjsui/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js" charset="utf-8" type="text/javascript"></script>
    <script src="../hcjsui/Scripts/jquery.form.js" type="text/javascript"></script>
    <script src="../hcjsui/js/json2.js" type="text/javascript"></script>
    <script src="../hcjsui/js/_Define.js" type="text/javascript"></script>
    <script src="../hcjsui/js/customer.js" type="text/javascript"></script>
    <script type="text/javascript" src="../hcjsui/js/usbocx.js"></script>
    <script src="../hcjsui/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="../hcjsui/js/easyui-extend/form.js" type="text/javascript"></script>
    <script src="../hcjsui/js/easyui-extend/window.js" type="text/javascript"></script>
    <script src="../hcjsui/js/validateExtends.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/hc.js"></script>
  <script type="text/javascript" src="../lib/Highcharts/4.1.7/js/highcharts.js"></script>
    <script type="text/javascript" src="../lib/Highcharts/4.1.7/js/modules/exporting.js"></script>

    <!-- <script src="../Highcharts418/js/highcharts.js"></script>
    <script src="../Highcharts418/js/modules/exporting.js"></script>-->
    <script type="text/javascript">
        var data;
        $(function () {
            hcdosel("DepName as name ,COUNT(*) as y,DepID", "hcchart-View_User", "", "DepName ,DepID", "", "", function (indata) {
                data = $.parseJSON(indata);
                $('#container').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: '这个js不错！部门人员分布比例，数据'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            },
                            showInLegend: true,//可以去除 相关项
                            events: {
                                click: function (e) {
                                    jscharclick(e);
                                    // alert(e.point.name + e.point.DepID);
                                }
                            }

                        }
                    },

                    //去掉右下角的highcharts.com需要加入以下内容： 
                    credits: {
                        enabled: false
                    },

                    //    如果不设置，那么默认为显示。 
                    //去掉右上角的打印及其导出按钮： 
                    exporting: {
                        enabled: true
                    },


                    series: [{
                        name: "比例",
                        colorByPoint: true,
                        data: data
                    }]
                });
            });
        });
        function jscharclick(e) {
            $.messager.alert("你想怎样？", e.point.name + e.point.DepID);
        }
        function Search() {
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: '这个js不错！部门人员分布比例，数据'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        },
                        showInLegend: true,//可以去除 相关项
                        events: {
                            click: function (e) {
                                jscharclick(e);
                                // alert(e.point.name + e.point.DepID);
                            }
                        }

                    }
                },

                //去掉右下角的highcharts.com需要加入以下内容： 
                credits: {
                    enabled: false
                },

                //    如果不设置，那么默认为显示。 
                //去掉右上角的打印及其导出按钮： 
                exporting: {
                    enabled: true
                },


                series: [{
                    name: "比例",
                    colorByPoint: true,
                    data: data
                }]
            });
        }
    </script>

    <div region="north" title="图表应用-Highcharts418" split="false" border="false" style="height: 60px;">
        <table width="98%">
            <tr>
                <td class="auto-style1">
                    <form id="searchForm" method="post" runat="server">
                        <div>
                            <!--<select id="findtype" name="findtype_d" class="easyui-combobox" style="width: 150px;">
                                <option value="本部" selected="selected">本部</option>
                                <option value="分部">分部</option>
                            </select>
                            名称：<input id="findBranchName" name="findBranchName" />-->
                            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="javascript:Search();">查询</a>&nbsp;&nbsp;
                            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="javascript:Reset();">重置</a> &nbsp;&nbsp;
                             <a href="../lib/Highcharts/4.1.7/index.htm" class="easyui-linkbutton" data-options="iconCls:'icon-search'">更多样例查看</a>
                        </div>
                    </form>
                </td>


            </tr>
        </table>
    </div>

    <div region="center" style="padding: 0px;" border="false">



        <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>



    </div>



</body>
</html>
